import { defineComponent } from 'vue'
import { CommonWidgetNames, FiledPropsDefine } from '../types'
import { getWidget } from '../theme'

export default defineComponent({
  name: 'NumberField',
  props: FiledPropsDefine,
  setup(props) {
    const handleChange = (v: string) => {
      props.onChange(v)
    }

    const NumberWidgetRef = getWidget(CommonWidgetNames.NumberWidget)

    return () => {
      const { value } = props

      const NumberWidget = NumberWidgetRef.value

      return <NumberWidget value={value as string} onChange={handleChange} />
    }
  },
})
